<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>block-area</title>
</head>
<body>
<!-- 快捷链接窗口，二级目录 -->
<div id="shortcuts" class="block-area shortcut-area">
    <a class="shortcut tile" href="">
        <img src="/static/img/shortcuts/money.png" th:src="@{/img/shortcuts/money.png}" alt="">
        <small class="t-overflow">Purchases</small>
    </a>
    <a class="shortcut tile" href="">
        <img src="/static/img/shortcuts/twitter.png" th:src="@{/img/shortcuts/twitter.png}" alt="">
        <small class="t-overflow">Tweets</small>
    </a>
    <a class="shortcut tile" href="">
        <img src="/static/img/shortcuts/calendar.png" th:src="@{/img/shortcuts/calendar.png}" alt="">
        <small class="t-overflow">Calendar</small>
    </a>
    <a class="shortcut tile" href="">
        <img src="/static/img/shortcuts/stats.png" th:src="@{/img/shortcuts/stats.png}" alt="">
        <small class="t-overflow">Statistics</small>
    </a>
    <a class="shortcut tile" href="">
        <img src="/static/img/shortcuts/connections.png" th:src="@{/img/shortcuts/connections.png}" alt="">
        <small class="t-overflow">Connection</small>
    </a>
    <a class="shortcut tile" href="">
        <img src="/static/img/shortcuts/reports.png" th:src="@{/img/shortcuts/reports.png}" alt="">
        <small class="t-overflow">Reports</small>
    </a>
</div>

<!-- Quick Stats，统计（访问量等）-->
<div id="quick-stats" class="block-area">
    <div class="row">
        <div class="col-md-3 col-xs-6">
            <div class="tile quick-stats">
                <div id="stats-line-2" class="pull-left"></div>
                <div class="data">
                    <h2 data-value="98">0</h2>
                    <small>Tickets Today</small>
                </div>
            </div>
        </div>

        <div class="col-md-3 col-xs-6">
            <div class="tile quick-stats media">
                <div id="stats-line-3" class="pull-left"></div>
                <div class="media-body">
                    <h2 data-value="1452">0</h2>
                    <small>Shipments today</small>
                </div>
            </div>
        </div>

        <div class="col-md-3 col-xs-6">
            <div class="tile quick-stats media">

                <div id="stats-line-4" class="pull-left"></div>

                <div class="media-body">
                    <h2 data-value="4896">0</h2>
                    <small>Orders today</small>
                </div>
            </div>
        </div>

        <div class="col-md-3 col-xs-6">
            <div class="tile quick-stats media">
                <div id="stats-line" class="pull-left"></div>
                <div class="media-body">
                    <h2 data-value="29356">0</h2>
                    <small>Site visits today</small>
                </div>
            </div>
        </div>

    </div>

</div>

<!-- Main Widgets，主要部件1 -->
<div id="widget-01" class="block-area">
    <div class="row">
        <div class="col-md-8">
            <!-- Main Chart -->
            <div class="tile">
                <h2 class="tile-title">Statistics</h2>
                <div class="tile-config dropdown">
                    <a data-toggle="dropdown" href="" class="tile-menu"></a>
                    <ul class="dropdown-menu pull-right text-right">
                        <li><a class="tile-info-toggle" href="">Chart Information</a></li>
                        <li><a href="">Refresh</a></li>
                        <li><a href="">Settings</a></li>
                    </ul>
                </div>
                <div class="p-10">
                    <div id="line-chart" class="main-chart" style="height: 250px"></div>

                    <div class="chart-info">
                        <ul class="list-unstyled">
                            <li class="m-b-10">
                                Total Sales 1200
                                <span class="pull-right text-muted t-s-0">
                                                    <i class="fa fa-chevron-up"></i>
                                                    +12%
                                                </span>
                            </li>
                            <li>
                                <small>
                                    Local 640
                                    <span class="pull-right text-muted t-s-0"><i
                                            class="fa m-l-15 fa-chevron-down"></i> -8%</span>
                                </small>
                                <div class="progress progress-small">
                                    <div class="progress-bar progress-bar-warning" role="progressbar"
                                         aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"
                                         style="width: 40%"></div>
                                </div>
                            </li>
                            <li>
                                <small>
                                    Foreign 560
                                    <span class="pull-right text-muted t-s-0">
                                                        <i class="fa m-l-15 fa-chevron-up"></i>
                                                        -3%
                                                    </span>
                                </small>
                                <div class="progress progress-small">
                                    <div class="progress-bar progress-bar-info" role="progressbar"
                                         aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"
                                         style="width: 60%"></div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Pies -->
            <div class="tile text-center">
                <div class="tile-dark p-10">
                    <div class="pie-chart-tiny" data-percent="86">
                        <span class="percent"></span>
                        <span class="pie-title">New Visitors <i class="m-l-5 fa fa-retweet"></i></span>
                    </div>
                    <div class="pie-chart-tiny" data-percent="23">
                        <span class="percent"></span>
                        <span class="pie-title">Bounce Rate <i class="m-l-5 fa fa-retweet"></i></span>
                    </div>
                    <div class="pie-chart-tiny" data-percent="57">
                        <span class="percent"></span>
                        <span class="pie-title">Emails Sent <i class="m-l-5 fa fa-retweet"></i></span>
                    </div>
                    <div class="pie-chart-tiny" data-percent="34">
                        <span class="percent"></span>
                        <span class="pie-title">Sales Rate <i class="m-l-5 fa fa-retweet"></i></span>
                    </div>
                    <div class="pie-chart-tiny" data-percent="81">
                        <span class="percent"></span>
                        <span class="pie-title">New Signups <i class="m-l-5 fa fa-retweet"></i></span>
                    </div>
                </div>
            </div>

            <!--  Recent Postings -->
            <div class="row">
                <div class="col-md-6">
                    <div class="tile">
                        <h2 class="tile-title">Recent Postings</h2>
                        <div class="tile-config dropdown">
                            <a data-toggle="dropdown" href="" class="tile-menu"></a>
                            <ul class="dropdown-menu animated pull-right text-right">
                                <li><a href="">Refresh</a></li>
                                <li><a href="">Settings</a></li>
                            </ul>
                        </div>

                        <div class="listview narrow">
                            <div class="media p-l-5">
                                <div class="pull-left">
                                    <img width="40" src="/static/img/profile-pics/1.jpg"
                                         th:src="@{/img/profile-pics/1.jpg}" alt="">
                                </div>
                                <div class="media-body">
                                    <small class="text-muted">2 Hours ago by Adrien San</small>
                                    <br/>
                                    <a class="t-overflow" href="">Cras molestie fermentum nibh, ac semper</a>

                                </div>
                            </div>
                            <div class="media p-l-5">
                                <div class="pull-left">
                                    <img width="40" src="/static/img/profile-pics/2.jpg"
                                         th:src="@{/img/profile-pics/2.jpg}" alt="">
                                </div>
                                <div class="media-body">
                                    <small class="text-muted">5 Hours ago by David Villa</small>
                                    <br/>
                                    <a class="t-overflow" href="">Suspendisse in purus ut nibh placerat</a>

                                </div>
                            </div>
                            <div class="media p-l-5">
                                <div class="pull-left">
                                    <img width="40" src="/static/img/profile-pics/3.jpg"
                                         th:src="@{/img/profile-pics/3.jpg}" alt="">
                                </div>
                                <div class="media-body">
                                    <small class="text-muted">On 15/12/2013 by Mitch bradberry</small>
                                    <br/>
                                    <a class="t-overflow" href="">Cras pulvinar euismod nunc quis gravida.
                                        Suspendisse pharetra</a>

                                </div>
                            </div>
                            <div class="media p-l-5">
                                <div class="pull-left">
                                    <img width="40" src="/static/img/profile-pics/4.jpg"
                                         th:src="@{/img/profile-pics/4.jpg}" alt="">
                                </div>
                                <div class="media-body">
                                    <small class="text-muted">On 14/12/2013 by Mitch bradberry</small>
                                    <br/>
                                    <a class="t-overflow" href="">Cras pulvinar euismod nunc quis gravida. </a>

                                </div>
                            </div>
                            <div class="media p-l-5">
                                <div class="pull-left">
                                    <img width="40" src="/static/img/profile-pics/5.jpg"
                                         th:src="@{/img/profile-pics/5.jpg}" alt="">
                                </div>
                                <div class="media-body">
                                    <small class="text-muted">On 13/12/2013 by Mitch bradberry</small>
                                    <br/>
                                    <a class="t-overflow" href="">Integer a eros dapibus, vehicula quam
                                        accumsan, tincidunt purus</a>

                                </div>
                            </div>
                            <div class="media p-5 text-center l-100">
                                <a href="">
                                    <small>VIEW ALL</small>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Tasks to do -->
                <div class="col-md-6">
                    <div class="tile">
                        <h2 class="tile-title">Tasks to do</h2>
                        <div class="tile-config dropdown">
                            <a data-toggle="dropdown" href="" class="tile-menu"></a>
                            <ul class="dropdown-menu pull-right text-right">
                                <li id="todo-add"><a href="">Add New</a></li>
                                <li id="todo-refresh"><a href="">Refresh</a></li>
                                <li id="todo-clear"><a href="">Clear All</a></li>
                            </ul>
                        </div>

                        <div class="listview todo-list sortable">
                            <div class="media">
                                <div class="checkbox m-0">
                                    <label class="t-overflow">
                                        <input type="checkbox">
                                        Curabitur quis nisi ut nunc gravida suscipis
                                    </label>
                                </div>
                            </div>
                            <div class="media">
                                <div class="checkbox m-0">
                                    <label class="t-overflow">
                                        <input type="checkbox">
                                        Suscipit at feugiat dewoo
                                    </label>
                                </div>

                            </div>
                            <div class="media">
                                <div class="checkbox m-0">
                                    <label class="t-overflow">
                                        <input type="checkbox">
                                        Gravida wendy lorem ipsum seen
                                    </label>
                                </div>

                            </div>
                            <div class="media">
                                <div class="checkbox m-0">
                                    <label class="t-overflow">
                                        <input type="checkbox">
                                        Fedrix quis nisi ut nunc gravida suscipit at feugiat purus
                                    </label>
                                </div>

                            </div>
                        </div>

                        <h2 class="tile-title">Completed Tasks</h2>

                        <div class="listview todo-list sortable">
                            <div class="media">
                                <div class="checkbox m-0">
                                    <label class="t-overflow">
                                        <input type="checkbox" checked="checked">
                                        Motor susbect win latictals bin the woodat cool
                                    </label>
                                </div>

                            </div>
                            <div class="media">
                                <div class="checkbox m-0">
                                    <label class="t-overflow">
                                        <input type="checkbox" checked="checked">
                                        Wendy mitchel susbect win latictals bin the woodat cool
                                    </label>
                                </div>

                            </div>
                            <div class="media">
                                <div class="checkbox m-0">
                                    <label class="t-overflow">
                                        <input type="checkbox" checked="checked">
                                        Latictals bin the woodat cool for the win
                                    </label>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>

        <div class="col-md-4">
            <!-- USA Map -->
            <div class="tile">
                <h2 class="tile-title">Live Visits</h2>
                <div class="tile-config dropdown">
                    <a data-toggle="dropdown" href="" class="tile-menu"></a>
                    <ul class="dropdown-menu pull-right text-right">
                        <li><a href="">Refresh</a></li>
                        <li><a href="">Settings</a></li>
                    </ul>
                </div>

                <div id="usa-map"></div>
            </div>

            <!-- Dynamic Chart -->
            <div class="tile">
                <h2 class="tile-title">Server Process</h2>
                <div class="tile-config dropdown">
                    <a data-toggle="dropdown" href="" class="tile-menu"></a>
                    <ul class="dropdown-menu pull-right text-right">
                        <li><a href="">Refresh</a></li>
                        <li><a href="">Settings</a></li>
                    </ul>
                </div>

                <div class="p-t-10 p-r-5 p-b-5">
                    <div id="dynamic-chart" style="height: 200px"></div>
                </div>

            </div>

            <!-- Activity -->
            <div class="tile">
                <h2 class="tile-title">Social Media activities</h2>
                <div class="tile-config dropdown">
                    <a data-toggle="dropdown" href="" class="tile-menu"></a>
                    <ul class="dropdown-menu pull-right text-right">
                        <li><a href="">Refresh</a></li>
                        <li><a href="">Settings</a></li>
                    </ul>
                </div>

                <div class="listview narrow">

                    <div class="media">
                        <div class="pull-right">
                            <div class="counts">367892</div>
                        </div>
                        <div class="media-body">
                            <h6>FACEBOOK LIKES</h6>
                        </div>
                    </div>

                    <div class="media">
                        <div class="pull-right">
                            <div class="counts">2012</div>
                        </div>
                        <div class="media-body">
                            <h6>GOOGLE +1s</h6>
                        </div>
                    </div>

                    <div class="media">
                        <div class="pull-right">
                            <div class="counts">56312</div>
                        </div>
                        <div class="media-body">
                            <h6>YOUTUBE VIEWS</h6>
                        </div>
                    </div>

                    <div class="media">
                        <div class="pull-right">
                            <div class="counts">785879</div>
                        </div>
                        <div class="media-body">
                            <h6>TWITTER FOLLOWERS</h6>
                        </div>
                    </div>
                    <div class="media">
                        <div class="pull-right">
                            <div class="counts">68</div>
                        </div>
                        <div class="media-body">
                            <h6>WEBSITE COMMENTS</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
</div>

<div id="widget-02" class="block-area">
    <div class="row">
        <div class="col-md-9">
            <div class="tile-light p-5 m-b-15">
                <div class="cover p-relative">
                    <img src="/static/img/cover-bg.jpg" th:src="@{/img/cover-bg.jpg}" class="w-100" alt="">
                    <img class="profile-pic" src="/static/img/profile-pic.jpg" th:src="@{/img/profile-pic.jpg}" alt="">
                    <div class="profile-btn">
                        <button class="btn btn-alt btn-sm"><i class="icon-bubble"></i> <span>Message</span></button>
                        <button class="btn btn-alt btn-sm"><i class="icon-user-2"></i> <span>Friend</span></button>
                    </div>
                </div>
                <div class="p-5 m-t-15">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget risus rhoncus, cursus purus vitae, venenatis eros. Phasellus at tincidunt risus. Integer sed massa fermentum, feugiat arcu quis, ultrices nisi. Quisque commodo nisi scelerisque, tempus diam ac, dignissim tellus. Mauris adipiscing elit tortor, dignissim auctor diam mollis sed. Nulla eu dui non velit accumsan scelerisque eget et felis.
                </div>
            </div>

            <!--<div class="m-b-15 text-center profile-summary">-->
                <!--<button class="btn btn-sm">42 Followers</button>-->
                <!--<button class="btn btn-sm">69 Followings</button>-->
                <!--<button class="btn btn-sm hidden-xs">120 Comments</button>-->
                <!--<button class="btn btn-sm hidden-xs">165 Likes</button>-->
            <!--</div>-->

            <!--<div class="row">-->
                <!--&lt;!&ndash; Works &ndash;&gt;-->
                <!--<div class="col-md-7">-->
                    <!--<div class="tile">-->
                        <!--<h2 class="tile-title">Works in progress</h2>-->
                        <!--<div class="tile-config dropdown">-->
                            <!--<a data-toggle="dropdown" href="" class="tooltips tile-menu" title="" data-original-title="Options"></a>-->
                            <!--<ul class="dropdown-menu pull-right text-right">-->
                                <!--<li><a href="">Edit</a></li>-->
                                <!--<li><a href="">Delete</a></li>-->
                            <!--</ul>-->
                        <!--</div>-->

                        <!--<div class="p-10">-->
                            <!--<div class="m-b-10">-->
                                <!--Joomla CMS website for Lexus Inc. - 60%-->
                                <!--<div class="progress progress-striped progress-alt">-->
                                    <!--<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"></div>-->
                                <!--</div>-->
                            <!--</div>-->

                            <!--<div class="m-b-10">-->
                                <!--Lotus Design's AMC updates - 90%-->
                                <!--<div class="progress progress-striped progress-alt">-->
                                    <!--<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%"></div>-->
                                <!--</div>-->
                            <!--</div>-->

                            <!--<div class="m-b-10">-->
                                <!--Chrome Extension developement - 33%-->
                                <!--<div class="progress progress-striped progress-alt">-->
                                    <!--<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100" style="width: 33%"></div>-->
                                <!--</div>-->
                            <!--</div>-->

                            <!--<div class="m-b-10">-->
                                <!--Wireframes for new website - 50%-->
                                <!--<div class="progress progress-striped progress-alt">-->
                                    <!--<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%"></div>-->
                                <!--</div>-->
                            <!--</div>-->

                            <!--<div>-->
                                <!--Wordpress Website & Plugin - 99%-->
                                <!--<div class="progress progress-striped progress-alt">-->
                                    <!--<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="99" aria-valuemin="0" aria-valuemax="100" style="width: 99%"></div>-->
                                <!--</div>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</div>-->

                    <!--&lt;!&ndash; Completed Projects &ndash;&gt;-->
                    <!--<div class="tile">-->
                        <!--<h2 class="tile-title m-b-5">Completed Projects</h2>-->
                        <!--<div class="tile-config dropdown">-->
                            <!--<a data-toggle="dropdown" href="" class="tooltips tile-menu" title="" data-original-title="Options"></a>-->
                            <!--<ul class="dropdown-menu pull-right text-right">-->
                                <!--<li><a href="">Edit</a></li>-->
                                <!--<li><a href="">Delete</a></li>-->
                            <!--</ul>-->
                        <!--</div>-->

                        <!--<div class="p-10 news">-->
                            <!--<div class="col-xs-4">-->
                                <!--<div class="tile p-5 m-b-10">-->
                                    <!--<a target="_blank" title="Medical-Pro Bootstrap Responsive Template" href="https://wrapbootstrap.com/theme/medical-pro-responsive-template-WB06421XL">-->
                                        <!--<img class="w-100" src="/static/img/projects/1.png" th:src="@{/img/projects/1.png}" alt="">-->
                                        <!--<small class="t-overflow m-t-10">Medical-Pro Bootstrap Responsive</small>-->
                                    <!--</a>-->
                                    <!--<div class="clearfix"></div>-->
                                <!--</div>-->
                            <!--</div>-->
                            <!--<div class="col-xs-4">-->
                                <!--<div class="tile p-5 m-b-10">-->
                                    <!--<a target="_blank" title="Black Pearl Responsive Admin Template" href="https://wrapbootstrap.com/theme/black-pearl-responsive-admin-template-WB040H333">-->
                                        <!--<img class="w-100" src="/static/img/projects/2.png" th:src="@{/img/projects/2.png}" alt="">-->
                                        <!--<small class="t-overflow m-t-10">Black Pearl Responsive Admin Template</small>-->
                                    <!--</a>-->
                                    <!--<div class="clearfix"></div>-->
                                <!--</div>-->
                            <!--</div>-->
                            <!--<div class="col-xs-4">-->
                                <!--<div class="tile p-5 m-b-10">-->
                                    <!--<a target="_blank" title="UNEKUE Single Page Portfolio Template" href="https://wrapbootstrap.com/theme/unekue-single-page-portfolio-template-WB04R2B18">-->
                                        <!--<img class="w-100" src="/static/img/projects/3.png" th:src="@{/img/projects/3.png}" alt="">-->
                                        <!--<small class="t-overflow m-t-10">UNEKUE Single Page Portfolio Template</small>-->
                                    <!--</a>-->
                                    <!--<div class="clearfix"></div>-->
                                <!--</div>-->
                            <!--</div>-->


                            <!--<div class="clearfix"></div>-->
                        <!--</div>-->
                    <!--</div>-->

                <!--</div>-->


                <!--<div class="col-md-5">-->
                    <!--<div class="tile">-->
                        <!--<h2 class="tile-title">Recent Activities</h2>-->
                        <!--<div class="tile-config dropdown">-->
                            <!--<a data-toggle="dropdown" href="" class="tooltips tile-menu" title="" data-original-title="Options"></a>-->
                            <!--<ul class="dropdown-menu pull-right text-right">-->
                                <!--<li><a href="">Edit</a></li>-->
                                <!--<li><a href="">Delete</a></li>-->
                            <!--</ul>-->
                        <!--</div>-->

                        <!--<div class="listview narrow">-->
                            <!--<div class="media">-->
                                <!--<div class="pull-right">-->
                                    <!--<img width="37" src="/static/img/profile-pics/1.jpg" th:src="@{/img/profile-pics/1.jpg}"alt="">-->
                                <!--</div>-->
                                <!--<div class="media-body">-->
                                    <!--Connected with <a class="news-title underline" href="">Mitchell Christein</a>-->
                                    <!--<div class="clearfix"></div>-->
                                    <!--<small class="muted">30 Minutes ago</small>-->
                                <!--</div>-->
                            <!--</div>-->
                            <!--<div class="media">-->
                                <!--<div class="pull-right">-->
                                    <!--<img width="37" src="/static/img/profile-pics/4.jpg" th:src="@{/img/profile-pics/4.jpg}" alt="">-->
                                <!--</div>-->
                                <!--<div class="media-body">-->
                                    <!--<a class="news-title underline" href="">Wayne Cerolina</a> Accepted your friend request-->
                                    <!--<div class="clearfix"></div>-->
                                    <!--<small class="muted">2 Hours ago</small>-->
                                <!--</div>-->
                            <!--</div>-->
                            <!--<div class="media">-->
                                <!--<div class="media-body">-->
                                    <!--<a class="news-title" href="">Uploaded 7 files to DOCS folder</a>-->
                                    <!--<div class="clearfix"></div>-->
                                    <!--<small class="muted">3 Hours ago</small>-->
                                <!--</div>-->
                            <!--</div>-->
                            <!--<div class="media">-->
                                <!--<div class="media-body">-->
                                    <!--Joined the Group <a class="news-title underline" href="">'90s Rock Hits'</a>-->
                                    <!--<div class="clearfix"></div>-->
                                    <!--<small class="muted">5 Hours ago</small>-->
                                <!--</div>-->
                            <!--</div>-->
                            <!--<div class="media">-->
                                <!--<div class="pull-right">-->
                                    <!--<img width="37" src="/static/img/profile-pics/5.jpg" th:src="@{/img/profile-pics/5.jpg}" alt="">-->
                                <!--</div>-->
                                <!--<div class="media-body">-->
                                    <!--Wrote on <a class="news-title underline" href="">David Villa's</a> Wall-->
                                    <!--<div class="clearfix"></div>-->
                                    <!--<small class="muted">8 Hours ago</small>-->
                                <!--</div>-->
                            <!--</div>-->
                            <!--<div class="media">-->
                                <!--<div class="media-body">-->
                                    <!--Signed up an Affiliate-->
                                    <!--<div class="clearfix"></div>-->
                                    <!--<small class="muted">6 Hours ago</small>-->
                                <!--</div>-->
                            <!--</div>-->
                            <!--<div class="media">-->
                                <!--<div class="media-body">-->
                                    <!--Completed and submited the project <a class="news-title underline" href="">Joomla</a>-->
                                    <!--<div class="clearfix"></div>-->
                                    <!--<small class="muted">12 Hours ago</small>-->
                                <!--</div>-->
                            <!--</div>-->
                            <!--<div class="media">-->
                                <!--<div class="media-body">-->
                                    <!--Travelled to <a class="news-title underline" href="">San Fransisco</a>, United States-->
                                    <!--<div class="clearfix"></div>-->
                                    <!--<small class="muted">12 Hours ago</small>-->
                                <!--</div>-->
                            <!--</div>-->
                            <!--<div class="media">-->
                                <!--<div class="pull-right">-->
                                    <!--<img width="37" src="/static/img/profile-pics/6.jpg" th:src="@{/img/profile-pics/6.jpg}" alt="">-->
                                <!--</div>-->
                                <!--<div class="media-body">-->
                                    <!--Conneted with <a class="news-title underline" href="">Emma Stone</a>-->
                                    <!--<div class="clearfix"></div>-->
                                    <!--<small class="muted">2 Days ago</small>-->
                                <!--</div>-->
                            <!--</div>-->
                            <!--<div class="media p-5 text-center l-100">-->
                                <!--<a href=""><small>VIEW ALL</small></a>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->

        </div>

        <div class="col-md-3">

            <!-- About Me -->
            <div class="tile">
                <h2 class="tile-title">About me</h2>
                <div class="tile-config dropdown">
                    <a data-toggle="dropdown" href="" class="tooltips tile-menu" title="" data-original-title="Options"></a>
                    <ul class="dropdown-menu pull-right text-right">
                        <li><a href="">Edit</a></li>
                        <li><a href="">Delete</a></li>
                    </ul>
                </div>

                <div class="listview icon-list">
                    <div class="media">
                        <i class="icon pull-left">&#61744</i>
                        <div class="media-body">Software Developer at Google</div>
                    </div>

                    <div class="media">
                        <i class="icon pull-left">&#61753</i>
                        <div class="media-body">Studied at Oxford University</div>
                    </div>

                    <div class="media">
                        <i class="icon pull-left">&#61713</i>
                        <div class="media-body">Lives in Saturn, Milkyway</div>
                    </div>

                    <div class="media">
                        <i class="icon pull-left">&#61742</i>
                        <div class="media-body">From Titan, Jupitor</div>
                    </div>
                </div>
            </div>

            <!-- Friends -->
            <!--<div class="tile">-->
                <!--<h2 class="tile-title">Connections</h2>-->
                <!--<div class="tile-config dropdown">-->
                    <!--<a data-toggle="dropdown" href="" class="tooltips tile-menu" title="" data-original-title="Options"></a>-->
                    <!--<ul class="dropdown-menu pull-right text-right">-->
                        <!--<li><a href="">Edit</a></li>-->
                        <!--<li><a href="">Delete</a></li>-->
                    <!--</ul>-->
                <!--</div>-->

                <!--<div class="listview narrow">-->
                    <!--<div class="media p-l-5">-->
                        <!--<div class="pull-left">-->
                            <!--<img width="37" src="/static/img/profile-pics/1.jpg" th:src="@{/img/profile-pics/1.jpg}" alt="">-->
                        <!--</div>-->
                        <!--<div class="media-body">-->
                            <!--<a class="news-title" href="">Mitchell Christein</a>-->
                            <!--<div class="clearfix"></div>-->
                            <!--<a href=""><small class="text-muted">Unfriend</small></a>-->
                        <!--</div>-->
                    <!--</div>-->
                    <!--<div class="media p-l-5">-->
                        <!--<div class="pull-left">-->
                            <!--<img width="37" src="/static/img/profile-pics/2.jpg" th:src="@{/img/profile-pics/2.jpg}" alt="">-->
                        <!--</div>-->
                        <!--<div class="media-body">-->
                            <!--<a class="news-title" href="">David Villa</a>-->
                            <!--<div class="clearfix"></div>-->
                            <!--<a href=""><small class="text-muted">Unfriend</small></a>-->
                        <!--</div>-->
                    <!--</div>-->
                    <!--<div class="media p-l-5">-->
                        <!--<div class="pull-left">-->
                            <!--<img width="37" src="/static/img/profile-pics/3.jpg" th:src="@{/img/profile-pics/3.jpg}" alt="">-->
                        <!--</div>-->
                        <!--<div class="media-body">-->
                            <!--<a class="news-title" href="">The Iron man Jr.</a>-->
                            <!--<div class="clearfix"></div>-->
                            <!--<a href=""><small class="text-muted">Unfriend</small></a>-->
                        <!--</div>-->
                    <!--</div>-->
                    <!--<div class="media p-l-5">-->
                        <!--<div class="pull-left">-->
                            <!--<img width="37" src="/static/img/profile-pics/4.jpg" th:src="@{/img/profile-pics/4.jpg}" alt="">-->
                        <!--</div>-->
                        <!--<div class="media-body">-->
                            <!--<a class="news-title" href="">Stephen Elop</a>-->
                            <!--<div class="clearfix"></div>-->
                            <!--<a href=""><small class="text-muted">Unfriend</small></a>-->
                        <!--</div>-->
                    <!--</div>-->
                    <!--<div class="media p-l-5">-->
                        <!--<div class="pull-left">-->
                            <!--<img width="37" src="/static/img/profile-pics/5.jpg" th:src="@{/img/profile-pics/5.jpg}" alt="">-->
                        <!--</div>-->
                        <!--<div class="media-body">-->
                            <!--<a class="news-title" href="">Wendy wenkitson</a>-->
                            <!--<div class="clearfix"></div>-->
                            <!--<a href=""><small class="text-muted">Unfriend</small></a>-->
                        <!--</div>-->
                    <!--</div>-->
                    <!--<div class="media p-5 text-center l-100">-->
                        <!--<a href=""><small>VIEW ALL</small></a>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->

            <!-- Photos -->
            <!--<div class="tile">-->
                <!--<h2 class="tile-title">Photos</h2>-->
                <!--<div class="tile-config dropdown">-->
                    <!--<a data-toggle="dropdown" href="" class="tooltips tile-menu" title="" data-original-title="Options"></a>-->
                    <!--<ul class="dropdown-menu pull-right text-right">-->
                        <!--<li><a href="">Edit</a></li>-->
                        <!--<li><a href="">Delete</a></li>-->
                    <!--</ul>-->
                <!--</div>-->

                <!--<div class="p-5 photos">-->
                    <!--<div class="col-xs-3">-->
                        <!--<img src="/static/img/profile-pics/1.jpg" th:src="@{/img/profile-pics/1.jpg}" alt="">-->
                    <!--</div>-->
                    <!--<div class="col-xs-3">-->
                        <!--<img src="/static/img/profile-pics/2.jpg" th:src="@{/img/profile-pics/2.jpg}" alt="">-->
                    <!--</div>-->
                    <!--<div class="col-xs-3">-->
                        <!--<img src="/static/img/profile-pics/3.jpg" th:src="@{/img/profile-pics/3.jpg}" alt="">-->
                    <!--</div>-->
                    <!--<div class="col-xs-3">-->
                        <!--<img src="/static/img/profile-pics/4.jpg" th:src="@{/img/profile-pics/4.jpg}" alt="">-->
                    <!--</div>-->
                    <!--<div class="col-xs-3">-->
                        <!--<img src="/static/img/profile-pics/5.jpg" th:src="@{/img/profile-pics/5.jpg}" alt="">-->
                    <!--</div>-->
                    <!--<div class="col-xs-3">-->
                        <!--<img src="/static/img/profile-pics/6.jpg" th:src="@{/img/profile-pics/6.jpg}" alt="">-->
                    <!--</div>-->
                    <!--<div class="col-xs-3">-->
                        <!--<img src="/static/img/profile-pics/2.jpg" th:src="@{/img/profile-pics/2.jpg}" alt="">-->
                    <!--</div>-->
                    <!--<div class="col-xs-3">-->
                        <!--<img src="/static/img/profile-pics/5.jpg" th:src="@{/img/profile-pics/5.jpg}"alt="">-->
                    <!--</div>-->
                    <!--<div class="col-xs-3">-->
                        <!--<img src="/static/img/profile-pics/1.jpg" th:src="@{/img/profile-pics/1.jpg}" alt="">-->
                    <!--</div>-->
                    <!--<div class="col-xs-3">-->
                        <!--<img src="/static/img/profile-pics/3.jpg" th:src="@{/img/profile-pics/3.jpg}" alt="">-->
                    <!--</div>-->
                    <!--<div class="col-xs-3">-->
                        <!--<img src="/static/img/profile-pics/4.jpg" th:src="@{/img/profile-pics/4.jpg}" alt="">-->
                    <!--</div>-->
                    <!--<div class="col-xs-3">-->
                        <!--<img src="/static/img/profile-pics/6.jpg" th:src="@{/img/profile-pics/6.jpg}" alt="">-->
                    <!--</div>-->

                    <!--<div class="clearfix"></div>-->
                <!--</div>-->
            <!--</div>-->
        </div>
    </div>

    <br/><br/><br/>
</div>
</body>
</html>